<template>
    <form
      class="form-inline"
      role="form"
    >
      <div class="goods-detail-inner">
        <div class="goods-imgs">
          <div class="goods-thumbnail">
            <canvas ref="canvas1" id="canvas1"></canvas>
            <canvas
              id="canvas2"
              style="display: none; left: 0px; top: 0px"
            ></canvas>
            <label class="sr-only" id="pic">{{SERVER_URL+product.goodsPic}}</label>
            <label class="sr-only" id="cateId">{{product.cateId}}}</label>
          </div>
          <div class="goods-thumbnails">
            <img v-for="(pic,idx) in product.pics" :key="pic.picId"
              
              :src="SERVER_URL+pic.picUrl"
              :alt="pic.picUrl?pic.picUrl:'暂无图片'"
              :id="idx===0?'first_img':''"
              @click="changePic(pic.picUrl)"
            />
          </div>
        </div>

        <div class="goods-detail">
          <h1 id="goodsName">{{product.goodsName}}</h1>
          <div class="detail-item price-content">
            <span class="title"> 价格 </span>
            <div class="price-inner">
              <em>¥ </em> <span class="price" id="goodsDiscount">{{product.goodsDiscount}}</span>
              <s> <span class="ori-price" id="goodsPrice">{{product.goodsPrice}}</span></s>
            </div>
          </div>
          <div class="detail-item">
            <span class="title"> 运费 </span> <span> ¥ {{product.goodsPostalfee}} </span>
          </div>
          <div class="detail-item">
            <span class="title"> 销量 </span>
            <div>共{{product.goodsSales}}件</div>
          </div>
          <div class="detail-item">
            <span class="title"> 数量</span>
            <div class="input-group input-group-sm col-xs-3">
              <input
                class="form-control"
                id="num"
                v-model="cartItem.num"
                name="num"
                min="1"
                type="number"/>
            </div>
          </div>
          <div class="detail-item action">
            <span class="title"> </span>
            <button @click="buy" type="button">立即购买</button>
            <button @click="addCart" type="button" >加入购物车</button>
          </div>
        </div>
      </div>
      <div class="details-wrapper">
        <h3>商品详情</h3>
        <div class="detail-item">
          <span>产地：</span>
          <div>{{product.goodsOrigin}}</div>
        </div>
        <div class="detail-item">
          <span>材质：</span>
          <div>{{product.goodsMaterial}}</div>
        </div>
        <span>详细介绍：</span>
        <div class="desc">
         {{product.goodsDisc}}
        </div>

        <div class="thumbnail" v-for="pic in product.pics" :key="pic.picId">
          <img
            :src="SERVER_URL+pic.picUrl"
            :alt="pic.picUrl?pic.picUrl:'暂无图片'"
          />
        </div>
      </div>
    </form>
<div class="container-fluid">
	<div class="row">
		<div class="col-md-12">
			<a  ref="msgModal" id="modal-536693" href="#modal-container-536693" role="button" class="btn" data-toggle="modal" style="display:none"></a>
			<div class="modal fade" id="modal-container-536693" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<h5 class="modal-title" id="myModalLabel">
								添加成功
							</h5> 
							<button type="button" class="close" data-dismiss="modal">
								<span aria-hidden="true">×</span>
							</button>
						</div>
						<div class="modal-body">
							已成功将商品添加到购物车
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-secondary" data-dismiss="modal">
								关闭
							</button>
						</div>
					</div>	
				</div>
			</div>
		</div>
	</div>
</div>
</template>
<script>
import { SERVER_URL } from "../utils/http"
export default {
  props:['product'], 
  inject:['eventBus'],
  data(){
    return {
      SERVER_URL,
      cartItem:{
        pic:'',
        num:1,
      },
      showImage:''
    }
  },
  updated(){
    if(this.product.pics.length>0){
      this.showImage=this.product.pics[0].picUrl;
      this.changePic(this.showImage)
    }
  },
  methods:{
    changePic(image) {
      this.cartItem.pic=image;
      let img=new Image()
      img.src=SERVER_URL+image;
      img.onload=()=>{
      const cvs=this.$refs.canvas1;
      let ctx=cvs.getContext('2d');
      ctx.clearRect(0,0,cvs.width,cvs.height)
      ctx.drawImage(img,0,0,cvs.width,cvs.height)
      }
		},
    buy(){
      const cartItem={...this.product,...this.cartItem};
        if(!this.$store.getters['user/isLogin']){
            this.eventBus.emit('needLogin');
          }else{
          this.$store.dispatch('order/addToBuyNow',
          {cartItem,
          success:()=>{
          this.$router.push({name:'CheckOut',params:{type:'now'},props:true})
          }
          ,fail:(e)=>{
          console.log(e)
          this.$toast("添加购物车失败");
          }})
          }
    },
    addCart(){ 
      const cartItem={...this.product,...this.cartItem};
       this.$store.dispatch('order/addToCart',cartItem)
       this.$refs.msgModal.click()
    }
  },
  created() {
   
  },
}
</script>
<style scoped>
@charset "UTF-8";

.container-fluid {
	padding-right: 15px !important;
	padding-left: 15px !important;
}

.btn {
	outline: none !important;
}

.goods-detail-wrapper {
	padding: 0;
}

.goods-detail-inner {
	display: flex;
}

.goods-imgs {
	margin-right: 30px;
}

.goods-thumbnails {
	padding: 10px 0;
	display: flex;
}

.goods-thumbnails img {
	width: 60px;
	height: 60px;
	cursor: pointer;
	margin-right: 10px;
}

.goods-detail {
	padding-top: 50px;
	flex: 1;
}

.detail-item {
	line-height: 24px;
	display: flex;
	margin-bottom: 10px;
}

.detail-item span.title {
	display: block;
	width: 120px;
	color: #838383;
	padding-left: 15px;
}

.goods-detail-inner {
	padding: 50px 0;
}

.details-wrapper h3 {
	position: relative;
	padding-left: 20px;
	color: #000;
}

.details-wrapper h3::before {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	content: " ";
	display: inline-block;
	background-color: #333;
	width: 5px;
	height: 22px;
}

.details-wrapper span {
	font-weight: bold;
}

.details-wrapper .desc {
	text-indent: 2em;
	margin-bottom: 30px;
}

.detail-item.action button {
	background-color: #ff0036;
	border: 1px solid #ff0036;
	color: #fff;
	overflow: hidden;
	position: relative;
	width: 178px;
	font-family: 'Microsoft Yahei';
	border-radius: 0;
	margin-right: 10px;
	height: 38px;
	line-height: 38px;
	text-align: center;
	font-size: 16px;
	outline: none;
}

.detail-item em {
	font-style: normal;
	font-weight: 400;
	color: #FF0036;
	font-size: 18px;
	font-family: Arial;
}

.detail-item .price {
	font-family: Arial;
	color: #FF0036;
	font-size: 24px;
}

.detail-item.action {
	margin-top: 50px;
}

.ori-price {
	font-size: 16px;
}

.goods-detail h1 {
	padding-bottom: .2em;
	line-height: 1;
	font-size: 16px;
	font-weight: 700;
	color: #000;
}

.price-content {
	padding: 10px 0;
	display: flex;
	width: 100%;
	background-color: #e9e9e9;
	background-repeat: no-repeat;
	background-image:
		url();
	background-color: #e9e9e9;
	width: 100%;
}
</style>